<!-- 
 * 专家学者新增编辑详情组件
 * @author: 
 * @since: 2023-08-31
 * index.vue
-->
<template>
    <div class="professor-com-container p20 detailsPageBox">
        <div class="detailsMain">
            <div class="title avatar-title">专家头像</div>
            <el-upload class="avatar-upload" action="#" :show-file-list="false" list-type="picture" :auto-upload="false" :on-change="upload" :disabled="props.type === 3">
                <img v-show="state.logo" :src="state.logo" class="avatar" />
                <div class="upload-box" v-show="!state.logo">
                    <div class="content">
                        <div class="icon"><svg-icon name="jiahao" color="#9AA8CC" size="32px"></svg-icon></div>
                        <div class="word"><span>添加图片</span></div>
                    </div>
                </div>
            </el-upload>
            <div class="title">基本信息</div>
            <div class="form">
                <el-form :model="form" :rules="rules" ref="validateForm" label-position="right" label-width="100px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="姓名：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.zhName }}</div>
                            </el-form-item>
                            <el-form-item label="姓名：" prop="zhName" v-else class="detail-form-item">
                                <el-input v-model="form.zhName" placeholder="请输入姓名" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="曾用名：" v-if="props.isType === 3" class="detail-form-item detailLabel">
                                <div class="detailWord">{{ form.historyName }}</div>
                            </el-form-item>
                            <el-form-item label="曾用名：" prop="historyName" v-else class="detail-form-item">
                                <el-input v-model="form.historyName" placeholder="请输入曾用名" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="性别：" v-if="props.isType === 3" class="detail-form-item detailLabel">
                                <div class="detailWord">{{ form.sex }}</div>
                            </el-form-item>
                            <el-form-item label="性别：" prop="sex" v-else class="detail-form-item" required>
                                <el-radio-group v-model="form.sex">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="出生日期：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.birthDay }}</div>
                            </el-form-item>
                            <el-form-item label="出生日期：" prop="birthDay" v-else class="detail-form-item">
                                <el-date-picker v-model="form.birthDay" type="date" placeholder="请选择出生日期" value-format="YYYY-MM-DD" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="国籍：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.nationality }}</div>
                            </el-form-item>
                            <el-form-item label="国籍：" prop="nationalityId" v-else class="detail-form-item">
                                <el-select v-model="form.nationalityId" placeholder="请选择国籍" @change="selectEvent($event, 1)">
                                    <el-option v-for="(item, index) in state.nationalList" :label="item.keyName" :value="item.keyId" :key="index" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="所在地：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.allAddress }}</div>
                            </el-form-item>
                            <el-form-item label="所在地：" v-else class="detail-form-item">
                                <ChooseAddress width="100%"  @changeAddress="changeAddress" direction="right">
                                </ChooseAddress>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="籍贯：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.nativePlace }}</div>
                            </el-form-item>
                            <el-form-item label="籍贯：" prop="nativePlace" v-else class="detail-form-item">
                                <el-input v-model="form.nativePlace" placeholder="请输入籍贯" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="民族：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.nation }}</div>
                            </el-form-item>
                            <el-form-item label="民族：" prop="nationId" v-else class="detail-form-item">
                                <el-select v-model="form.nationId" placeholder="请选择民族" @change="selectEvent($event, 2)">
                                    <el-option v-for="(item, index) in state.nationList" :label="item.keyName" :value="item.keyId" :key="index" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="身份：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.identity }}</div>
                            </el-form-item>
                            <el-form-item label="身份：" prop="identityId" v-else class="detail-form-item">
                                <el-select v-model="form.identityId" placeholder="请选择身份" @change="selectEvent($event, 3)">
                                    <el-option v-for="(item, index) in state.IDList" :label="item.keyName" :value="item.keyId" :key="index" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="所在单位：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.company }}</div>
                            </el-form-item>
                            <el-form-item label="所在单位：" prop="company" v-else class="detail-form-item">
                                <el-input v-model="form.company" placeholder="请输入所在单位" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="单位职务：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.job }}</div>
                            </el-form-item>
                            <el-form-item label="单位职务：" prop="job" v-else class="detail-form-item">
                                <el-input v-model="form.job" placeholder="请输入单位职务" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="最高学历：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.highBackdrop }}</div>
                            </el-form-item>
                            <el-form-item label="最高学历：" prop="highBackdropId" v-else class="detail-form-item">
                                <el-select v-model="form.highBackdropId" placeholder="请选择最高学历" @change="selectEvent($event, 4)">
                                    <el-option v-for="(item, index) in state.eduList" :label="item.keyName" :value="item.keyId" :key="index" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="最高学位：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.highDegree }}</div>
                            </el-form-item>
                            <el-form-item label="最高学位：" prop="highDegreeId" v-else class="detail-form-item">
                                <el-select v-model="form.highDegreeId" placeholder="请选择最高学位" @change="selectEvent($event, 5)">
                                    <el-option v-for="(item, index) in state.degreeList" :label="item.keyName" :value="item.keyId" :key="index" />
                                </el-select>

                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="毕业院校：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.schllo }}</div>
                            </el-form-item>
                            <el-form-item label="毕业院校：" prop="schllo" v-else class="detail-form-item">
                                <el-input v-model="form.schllo" placeholder="请输入毕业院校" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="所学专业：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.specialty }}</div>
                            </el-form-item>
                            <el-form-item label="所学专业：" prop="specialty" v-else class="detail-form-item">
                                <el-input v-model="form.specialty" placeholder="请输入所学专业" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="技术领域：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.technoSphere }}</div>
                            </el-form-item>
                            <el-form-item label="技术领域：" v-else class="detail-form-item" prop="technoSphereId">
                                <el-select v-model="form.technoSphereId" placeholder="请选择技术领域" @change="selectEvent($event, 6)">
                                    <el-option v-for="(item, index) in state.fieldList" :label="item.keyName" :value="item.keyId" :key="index" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="两院院士：" v-if="props.isType === 3" class="detail-form-item detailLabel">
                                <div class="detailWord">{{ form.isAcademician ? '是' : "否" }}</div>
                            </el-form-item>
                            <el-form-item label="两院院士：" prop="isAcademician" v-else class="detail-form-item">
                                <el-radio-group v-model="form.isAcademician">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>

                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="博士生导师：" v-if="props.isType === 3" class="detail-form-item detailLabel">
                                <div class="detailWord">{{ form.isSupervisor ? '是' : '否' }}</div>
                            </el-form-item>
                            <el-form-item label="博士生导师：" prop="isSupervisor" v-else class="detail-form-item">
                                <el-radio-group v-model="form.isSupervisor">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="联系方式：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.phone }}</div>
                            </el-form-item>
                            <el-form-item label="联系方式：" prop="phone" v-else class="detail-form-item">
                                <el-input v-model="form.phone" placeholder="请输入联系方式" clearable type="number" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="人才称号：" v-if="props.isType === 3" class="detailLabel detail-form-item">
                                <div class="detailWord">{{ form.talentTitle }}</div>
                            </el-form-item>
                            <el-form-item label="人才称号：" prop="talentTitleId" v-else class="detail-form-item">
                                <el-select v-model="form.talentTitleId" placeholder="请选择人才称号" @change="selectEvent($event, 7)">
                                    <el-option v-for="(item, index) in state.talentTitleList" :label="item.keyName" :value="item.keyId" :key="index" />
                                </el-select>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-form-item label="个人简历:" v-if="props.isType === 3" class="detail-form-item detailLabel">
                            <div v-html="form.brief" style="white-space: pre-wrap;margin:0;" class="richText"></div>
                        </el-form-item>
                        <el-form-item label="个人简历:" prop="brief" v-else class="detail-form-item detailLabel">
                            <TextEditor @textEdit="textEdit" :type="0" :html="form.brief"></TextEditor>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="工作履历:" v-if="props.isType === 3" class="detail-form-item detailLabel">
                            <div v-html="form.jobRecord" style="white-space: pre-wrap;" class="richText"></div>
                        </el-form-item>
                        <el-form-item label="工作履历:" prop="jobRecord" v-else class="detail-form-item detailLabel">
                            <TextEditor @textEdit="textEdit" :type="1" :html="form.jobRecord"></TextEditor>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="教育履历:" v-if="props.isType === 3" class="detail-form-item detailLabel">
                            <div v-html="form.studyRecord" style="white-space: pre-wrap;" class="richText"></div>
                        </el-form-item>
                        <el-form-item label="教育履历:" prop="studyRecord" v-else class="detail-form-item detailLabel">
                            <TextEditor @textEdit="textEdit" :type="2" :html="form.studyRecord"></TextEditor>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="承担项目:" v-if="props.isType === 3" class="detail-form-item detailLabel">
                            <div v-html="form.attendProject" style="white-space: pre-wrap;" class="richText"></div>
                        </el-form-item>
                        <el-form-item label="承担项目:" prop="attendProject" v-else class="detail-form-item detailLabel">
                            <TextEditor @textEdit="textEdit" :type="3" :html="form.attendProject"></TextEditor>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="获奖信息:" v-if="props.isType === 3" class="detail-form-item detailLabel">
                            <div v-html="form.attendPrize" style="white-space: pre-wrap;" class="richText"></div>
                        </el-form-item>
                        <el-form-item label="获奖信息:" prop="attendPrize" v-else class="detail-form-item detailLabel">
                            <TextEditor @textEdit="textEdit" :type="4" :html="form.attendPrize"></TextEditor>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="学术成果:" v-if="props.isType === 3" class="detail-form-item detailLabel">
                            <div v-html="form.result" style="white-space: pre-wrap;" class="richText"></div>
                        </el-form-item>
                        <el-form-item label="学术成果:" prop="result" v-else class="detail-form-item detailLabel">
                            <TextEditor @textEdit="textEdit" :type="5" :html="form.result"></TextEditor>
                        </el-form-item>
                    </el-row>

                </el-form>
            </div>
        </div>
        <div class="detailsHandleBtn">
            <el-button type="primary" size="mini" @click="submit" v-if="props.isType !== 3">提交</el-button>
            <el-button size="mini" @click="reset" v-if="props.isType !== 3">重置</el-button>
        </div>
    </div>
</template>

<script setup>

import { onMounted, ref, reactive, defineProps, inject } from 'vue';
import { detailHandleFinish } from '@/utils/common.js'
import { sessionstorage } from '@/utils/storage.js'
import { ElMessage } from 'element-plus'
import { getDictItemListApi, getDomainApi } from '@/api/public/publicDict.js'
import { addProfessorApi, getProfessorByIdApi, editProfessorApi } from "@/api/interface/professor.js"
const reload = inject('reload')



const props = defineProps({
    isType: {
        type: Number,
        default: 1,//1.新增 2.编辑 3.详情
    }
})

const state = reactive({
    nationalList: [],//国籍字典表
    nationList: [],//民族字典表
    IDList: [],//身份字典表
    eduList: [],//学历字典表
    degreeList: [],//学位字典表
    fieldList: [],//领域字典表
    talentTitleList: [],//人才称号字典表
    logo: '',
    file: null,
    professorItem: {}


})
//form表单
const validateForm = ref(null)

const form = reactive({
    id: '',
    zhName: '',//姓名
    historyName: '',//曾用名
    sex: '男',//性别
    birthDay: '',//出生日期
    nationality: '',//国籍名称
    nationalityId: '',//国籍编号
    allAddress: '',//所在地
    provinceCode: '',
    cityCode: '',
    areaCode: '',
    provinceName: '',
    cityName: '',
    areaName: '',
    nativePlace: '',//籍贯
    nation: '',//民族名称
    nationId: '',//民族编号
    identity: '',//身份名称
    identityId: '',//身份编号
    company: '',//所在单位
    job: '',//单位职务
    highBackdrop: '',//最高学历名称
    highBackdropId: '',//最高学历编号
    highDegree: '',//最高学位名称
    highDegreeId: '',//最高学位编号
    schllo: '',//毕业院校
    specialty: '',//所学专业
    technoSphere: '',//技术领域名称
    technoSphereId: '',//技术领域编号
    isAcademician: false,//是否两院院士
    isSupervisor: false,//是否博士生导师
    phone: '',//联系方式
    talentTitle: '',//人才称号名称
    talentTitleId: '',//人才称号编号
    brief: '',//个人简历
    jobRecord: '',//个人履历
    studyRecord: '',//教育履历
    attendProject: '',//承担项目
    attendPrize: '',//获奖信息
    result: '',//学术成果



})

//表单验证 
const rules = {
    zhName: [{ required: true, message: '必填项', trigger: 'blur' }],
    company: [{ required: true, message: '必填项', trigger: 'blur' }],
    highBackdrop: [{ required: true, message: '必选项', trigger: ['change', 'blur'] }],
    highDegree: [{ required: true, message: '必选项', trigger: ['change', 'blur'] }],
    schllo: [{ required: true, message: '必填项', trigger: 'blur' }],
    specialty: [{ required: true, message: '必填项', trigger: 'blur' }],
    provinceCode: [{ required: true, message: '必填项', trigger: 'blur' }],
};

onMounted(() => {
    getNationalList()
    getNationList()
    getIDList()
    getEduList()
    getDegreeList()
    getTalentTitleList()
    getDomain()

    if (props.isType !== 1) {//编辑
        state.professorItem = sessionstorage.get('professorItem')
        console.log(state.professorItem, '  state.professorItem');
        getProfessorById()
    }
})

//通过id获取详情
const getProfessorById = () => {
    const params = {
        id: state.professorItem.id
    }
    getProfessorByIdApi(params).then(res => {
        const { status, data } = res
        console.log(data, 'data');
        if (status === 200) {
            for (let key in form) {
                form[key] = data.result[0][key]
                state.logo = data.result[0]['logoUrl']
            }
        }
    })
}

//下拉框选择事件
const selectEvent = (e, type) => {
    switch (type) {
        case 1://国籍
            getSelectValue('nationality', 'nationalList', e)
            break;
        case 2://民族
            getSelectValue('nation', 'nationList', e)
            break;
        case 3://身份
            getSelectValue('identity', 'IDList', e)
            break;
        case 4://最高学历
            getSelectValue('highBackdrop', 'eduList', e)
            break;
        case 5://最高学位
            getSelectValue('highDegree', 'degreeList', e)
            break;
        case 6://技术领域
            getSelectValue('technoSphere', 'fieldList', e)
            break;
        case 7://人才称号
            getSelectValue('talentTitle', 'talentTitleList', e)
            break;
    }

}
//获取选择框的value值
const getSelectValue = (key, arrayName, id) => {
    form[key] = state[arrayName].find((item) => item.keyId === id)['keyName'];
}

//上传图片
const upload = (file) => {
    state.file = file.raw
    state.logo = file.url;
}

//富文本
const textEdit = (text, type) => {
    switch (type) {
        case 0:
            form.brief = text
            console.log(text, 'text');
            break;
        case 1:
            form.jobRecord = text
            break;
        case 2:
            form.studyRecord = text
            break;
        case 3:
            form.attendProject = text
            break;
        case 4:
            form.attendPrize = text
            break;
        case 5:
            form.result = text
            break;

    }

}
//获取所属领域
const getDomain = () => {
    getDomainApi({ parentId: 0 }).then(res => {
        const { status, data } = res
        if (status === 200) {
            state.fieldList = data
        }
    })


}
//获取国籍
const getNationalList = () => {
    const params = {
        ipi: 1,
        ips: 1000,
        dictType: 'DICT_COUNTRY'
    }
    getDictItemListApi(params).then(res => {
        const { status, data } = res
        if (status === 200) {
            state.nationalList = data.result
        }

    })

}
//获取民族
const getNationList = () => {
    const params = {
        ipi: 1,
        ips: 1000,
        dictType: 'DICT_FAMILY_NAME'
    }
    getDictItemListApi(params).then(res => {
        const { status, data } = res
        if (status === 200) {
            state.nationList = data.result
        }

    })

}
//获取身份
const getIDList = () => {
    const params = {
        ipi: 1,
        ips: 1000,
        dictType: 'DICT_IDENTITY'
    }
    getDictItemListApi(params).then(res => {
        const { status, data } = res
        if (status === 200) {
            state.IDList = data.result
        }

    })

}
//获取学历
const getEduList = () => {
    const params = {
        ipi: 1,
        ips: 1000,
        dictType: 'DICT_BACK_GROUND'
    }
    getDictItemListApi(params).then(res => {
        const { status, data } = res
        if (status === 200) {
            state.eduList = data.result
        }
    })

}
//获取学位
const getDegreeList = () => {
    const params = {
        ipi: 1,
        ips: 1000,
        dictType: 'DICT_DEGREE'
    }
    getDictItemListApi(params).then(res => {
        const { status, data } = res
        if (status === 200) {
            state.degreeList = data.result
        }
    })

}
//获取人才称号
const getTalentTitleList = () => {
    const params = {
        ipi: 1,
        ips: 1000,
        dictType: 'DICT_TALENTS'
    }
    getDictItemListApi(params).then(res => {
        const { status, data } = res
        if (status === 200) {
            state.talentTitleList = data.result
        }
    })

}


//获取地址
const changeAddress = (info) => {
    form.provinceCode = info.provinceCode
    form.cityCode = info.cityCode
    form.areaCode = info.areaCode
    form.provinceName = info.provinceName
    form.cityName = info.cityName
    form.areaName = info.areaName
}

//提交
const submit = () => {
    validateForm.value.validate((valid) => {
        if (valid) {
            const formData = new FormData();
            formData.append('form', new Blob([JSON.stringify(form)], { type: 'application/json' }))
            if (form.id) {//编辑
                if (state.file) {
                    formData.append('file', state.file)
                } else {
                    formData.append('file', null)
                }
                editProfessorApi(formData).then(res => {
                    detailHandleFinish(res, 'Professor')
                })

            } else {//新增
                if (state.file) {
                    formData.append('file', state.file)
                    addProfessorApi(formData).then(res => {
                        detailHandleFinish(res, 'Professor')
                    })

                } else {
                    ElMessage({
                        message: '请上传专家头像',
                        type: 'warning',
                    })

                }

            }

        } else {
            console.log('没通过验证');
        }
    });
}

//重置
const reset = () => {
    if (props.isType === 2) {//编辑
        getProfessorById()
    } else {
        validateForm.value.resetFields()
        reload()
    }
}


</script>

<style lang="scss" scoped>
.detailsMain {
    :deep(.richText) {
        p {
            margin: 0 !important;

        }
    }

    .el-form-item__content {
        p {
            padding: 0 !important;
        }

    }



    .title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 30px;
    }

    .avatar-title {
        margin-bottom: 10px;
    }

    .avatar-upload {
        margin-bottom: 20px;

        .avatar {
            width: 120px;
            height: 120px;
        }

        .upload-box {
            width: 120px;
            height: 120px;
            background: #f5f7fd;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;

            .icon {
                text-align: center;
            }

            .word {
                color: #a3adc5;
                font-size: 14px;
                margin-top: 10px;
            }
        }
    }

}
</style>
